<template>
    <div>
        <div class="vs-table-box">
            <h3>积分兑换服务次数</h3>
            <div class="searchInfo" style="width: 400px">
                <el-form ref="form" :inline="true" :model="ruleForm" label-width="120px">
                    <el-input placeholder="请输入姓名、手机号或会员卡号" v-model="keys" @keyup.enter.native="getUserSearch">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        <template slot="append">
                            <div @click="getUserSearch" class="inquire">
                                <i v-show="isBtn" class="el-icon-loading"></i>
                                查询
                            </div>
                        </template>
                    </el-input>
                </el-form>
            </div>
            <!-- 查询完进行回现  -->
            <el-descriptions border :column="3" style="margin-top: 20px">
                <el-descriptions-item label="会员卡号">{{ userMsg.vip_no }}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{ userMsg.realname }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ userMsg.gender | typeGender }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ userMsg.phone }}</el-descriptions-item>
                <el-descriptions-item label="积分">{{ userMsg.integral }}</el-descriptions-item>
            </el-descriptions>
            <el-form v-loading="loading" ref="ruleForm" label-position="right" class="orm-info vs-m-t-20"
                label-width="140px" :model="ruleForm" :rules="rules">
                <el-form-item label="名称：" prop="title">
                    <el-input clearable v-model="ruleForm.title" readonly style="width:250px"
                        placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="积分：" prop="integral">
                    <el-input clearable v-model="ruleForm.integral" readonly style="width:250px"
                        placeholder="请输入商品所需积分"></el-input>
                </el-form-item>
                <el-form-item style="width:100%" label="商品主图：" prop="images">
                    <vs-uploading width="120px" readonly height="120px" ref="uploading"
                        v-model="ruleForm.images"></vs-uploading>
                </el-form-item>
                <el-form-item label="次数：">
                    <div v-if="ruleForm.id">
                        <el-input-number v-model="number" :min="1"></el-input-number>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button @click="subitm" :loading="isBtn2" type="primary">积分兑换</el-button>
                </el-form-item>
            </el-form>
            <!-- <div class="vs-bottom-btns">
                <el-button  @click="subitm" :loading="isBtn" type="primary">保存</el-button>
            </div> -->
            <vs-select-user v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>
        </div>
    </div>
</template>

<script>
import VsSelectUser from '@/components/VsSelectUser.vue';
import VsUploading from "@/components/VsUploading";
export default {
    components: {
        VsUploading, VsSelectUser
    },
    data() {
        var images = (rule, value, callback) => {
            // 图片验证
            if (!this.ruleForm.images) {
                //hasFmt设置为true/false
                callback(new Error("请上传图片!"));
            } else {
                callback();
            }
        };
        return {
            dialogVisible3: false,
            loading: false,
            isBtn: false,
            isBtn2: false,
            vipUserList: [],
            keys: "",
            number: 1,
            ruleForm: {
                id: '',
                title: '',
                images: '',
                integral: '',
            },
            userMsg: {},
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                integral: [{ required: true, message: '请输入积分', trigger: 'blur' }],
                images: [{ required: true, validator: images }],
            },
        }
    },
    created() {
        this.getProjectService()
    },
    methods: {
        affirmUser(data) {
            this.userMsg = data;
        },
        async getUserSearch() {
            if (this.isBtn) return;
            let keys = this.keys.trim();
            if (!keys) return this.$message.error('请输入要搜索的会员卡号/手机号');
            this.isBtn = true;
            let { code, data } = await this.$Http.getUserSearch({ keys });
            this.isBtn = false;
            if (code && data) {
                this.dialogVisible3 = true;
                this.vipUserList = data;
            } else this.$message.warning('没有查询到相关的用户信息');
        },
        async subitm() {
            if (!this.userMsg?.id) return this.$message.error('请选择要积分兑换的用户!');
            console.log(`需要积分:${this.number * this.ruleForm.integral}  剩余积分:${this.userMsg.integral}`);
            if (this.number * this.ruleForm.integral > this.userMsg.integral) return this.$message.error('积分不足!');
            this.isBtn2 = true;
            let { code, data } = await this.$Http.setProjectIntegral({
                user_id: this.userMsg?.id,
                project_service_id: this.ruleForm.id,
                number: this.number
            })
            this.isBtn2 = false;
            if (code) {
                this.$message.success('兑换成功!');
                this.userMsg = {};
                this.keys = "";
            }
        },
        async getProjectService() {
            let { code, data } = await this.$Http.getProjectService();
            if (code) {
                this.ruleForm = data?.data?.[0]
            }
        },
    }
}
</script>
<style>
.disabled .el-upload--picture-card {
    display: none !important;
}

.el-input-group__append {
    padding: 0;
}
</style>
<style lang="scss" scoped>
.vs-table-box {
    height: calc(100vh - 160px);
}

.vs-bottom-btns {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 150px;
}

.inquire {
    cursor: pointer;
    line-height: 37px;
    width: 60px;
    text-align: center;
}
</style>